<template>
    <div class="bottom">
        <div class="icon">
            <div class="icon-item">
                <i class="iconfont icon-fl-jia"></i>
<!--               <router-link to="/find">发现</router-link>-->
                <router-link to="/find/recommend">发现</router-link>
<!--                <button @click="goToFind">发现</button>-->
            </div>
            <div class="icon-item">
                <i class="iconfont icon-fuwu"></i>
              <router-link to="/service">AI服务</router-link>
            </div>
            <div class="icon-item">
                <i class="iconfont icon-qiche"></i>
                <router-link to="/xiaopeng">小鹏</router-link>
<!--                <button @click="goToXiaopeng">小鹏</button>-->
<!--                <p2>小鹏</p2>-->
            </div>
            <div class="icon-item">
                <i class="iconfont icon-shangcheng"></i>
                <router-link to="/shop">商城</router-link>
<!--                <p2>商城</p2>-->
            </div>
            <div class="icon-item ">
                <i class="iconfont icon-wode"></i>
                <router-link to="/my">我的</router-link>
<!--                <p2>我的</p2>-->
            </div>
        </div>
<!--        <router-view></router-view>-->
    </div>
</template>

<style lang="scss" scoped>
.bottom{
        width: 100%;

}
.icon {
  display: flex;
  justify-content: space-between;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;

}
.bottom{
    position: fixed;
    bottom: 0;
}
</style>
<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const goToXiaopeng = () => {
    router.push('/xiaopeng');
};
const goToFind = () => {
    router.push('/find');
};
</script>